<script lang="ts" setup name="SubSidebar">
import useSettingsStore from '@g/store/modules/settings'
import useMenuStore from '@g/store/modules/menu'
import Logo from '../Logo/index.vue'
import SidebarItem from '../SidebarItem/sub.vue'

const settingsStore = useSettingsStore()
const menuStore = useMenuStore()
const route = useRoute()

const sidebarScrollTop = ref(0)

function onSidebarScroll(e: Event) {
  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop
}

const enableSidebar = computed(() => {
  return (
    settingsStore.mode === 'mobile'
    || (['side', 'head', 'single'].includes(
      settingsStore.settings.menu.menuMode
    )
      && menuStore.sidebarMenus.length !== 0
      && !(
        settingsStore.settings.menu.subMenuOnlyOneHide
        && menuStore.sidebarMenus.length === 1
        && (!menuStore.sidebarMenus[0].children
          || menuStore.sidebarMenus[0]?.children.every(
            item => item.meta?.sidebar === false
          ))
      ))
  )
})

const singleModel = computed(
  () => settingsStore.settings.menu.menuMode === 'single'
)

const isSide = computed(() =>
  ['single', 'head'].includes(settingsStore.settings.menu.menuMode)
)
</script>

<template>
  <div
    v-if="enableSidebar"
    class="sub-sidebar-container"
    :class="{
      'is-collapse':
        settingsStore.mode === 'pc'
        && settingsStore.settings.menu.subMenuCollapse,
      'is-head': settingsStore.settings.menu.menuMode === 'head',
    }"
    @scroll="onSidebarScroll"
  >
    <Logo
      :show-logo="isSide"
      class="sidebar-logo"
      :class="{
        'sidebar-logo-bg': isSide,
        'shadow': sidebarScrollTop,
      }"
    />
    <el-menu
      :unique-opened="settingsStore.settings.menu.subMenuUniqueOpened"
      :default-openeds="menuStore.defaultOpenedPaths"
      :default-active="route.meta.activeMenu || route.path"
      :collapse="settingsStore.mode === 'pc'
        && settingsStore.settings.menu.subMenuCollapse
      "
      :collapse-transition="true"
      class="fa-menu"
      :class="{
        'is-collapse-without-logo':
          !isSide && settingsStore.settings.menu.subMenuCollapse,
        [`menu-${settingsStore.settings.menu.menuFillStyle}`]:
          settingsStore.settings.menu.menuFillStyle !== '',
      }"
    >
      <transition-group name="sub-sidebar">
        <template v-for="(itemRoute, index) in singleModel ? (menuStore.allMenus as any) : menuStore.sidebarMenus">
          <SidebarItem
            v-if="itemRoute.meta?.sidebar !== false"
            :key="itemRoute.path || index"
            :item="itemRoute"
            :base-path="itemRoute.path || ''"
          />
        </template>
      </transition-group>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.sub-sidebar-container {
  overflow: hidden auto;
  overscroll-behavior: contain;
  // firefox隐藏滚动条
  scrollbar-width: none;

  &.is-head {
    overflow: unset;
  }

  // chrome隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  width: var(--ik-sub-sidebar-width);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--ik-sub-sidebar-bg);
  box-shadow: 10px 0 10px -10px var(--ik-box-shadow-color);
  transition: background-color 0.3s,
  var(--el-transition-box-shadow),
  left 0.3s,
  width 0.3s;

  &.is-collapse {
    width: var(--ik-sub-sidebar-collapse-width);

    .sidebar-logo {
      &:not(.sidebar-logo-bg) {
        display: none;
      }

      :deep(span) {
        display: none;
      }
    }

    .el-menu {
      width: var(--ik-sub-sidebar-collapse-width);
    }
  }

  .sidebar-logo {
    background-color: var(--ik-sub-sidebar-bg);
    transition: background-color 0.3s, var(--el-transition-box-shadow);

    &:not(.sidebar-logo-bg) {
      :deep(span) {
        color: var(--el-text-color-primary);
        transition: var(--el-transition-color);
      }
    }

    &.sidebar-logo-bg {
      background-color: var(--ik-sub-sidebar-bg);
    }

    &.shadow {
      box-shadow: 0 10px 10px -10px var(--ik-box-shadow-color);
    }
  }

  .el-menu {
    border-right: 0;
    padding-top: var(--ik-sidebar-logo-height);
    background-color: var(--ik-sub-sidebar-bg);
    transition: background-color 0.3s, var(--el-transition-color),
      var(--el-transition-border), padding-top 0.3s;

    &:not(.el-menu--collapse) {
      width: inherit;
    }

    &.is-collapse-without-logo {
      padding-top: 0;
    }

    &.el-menu--collapse {
      :deep(.title-icon) {
        margin-right: 0;
      }

      :deep(.el-menu-item),
      :deep(.el-sub-menu__title) {
        span,
        .el-sub-menu__icon-arrow {
          display: none;
        }
      }
    }

    &.menu-radius {
      .sidebar-item {
        &:first-child {
          padding-top: 10px;
        }

        &:last-child {
          padding-bottom: 10px;
        }
      }
    }

    &.menu-radius:not(.el-menu--collapse) {
      :deep(.el-menu--inline),
      :deep(.el-menu-item),
      :deep(.el-sub-menu__title) {
        border-radius: 10px;
        // margin-bottom: 12px;
        // padding: 0;
        // margin-left: calc( var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding) );
        // height: 36px;
        // font-size: 14px;
        // padding-left: 16px;
      }

      :deep(.el-menu-item) {
        padding: 0;
        margin-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding));
        height: 36px;
        font-size: 14px;
        // margin-bottom: 8px;
        padding-left: 16px;
        margin-right: 28px;
      }
    }
  }
}

// 次侧边栏动画
.sub-sidebar-enter-active {
  transition: 0.3s;
}

.sub-sidebar-enter-from,
.sub-sidebar-leave-active {
  opacity: 0;
  transform: translateY(30px) skewY(10deg);
}

.sub-sidebar-leave-active {
  position: absolute;
}
</style>
